<template>
  <!--实名认证-->
  <div class="l-box">
    <p class="l-title-name">兑换</p>

    <div class="l-filed">
      <div class="l-label">
        <span class="l-color-red">*</span><span>DFC金额：</span>
      </div>
      <input v-model="money" ref="dfc" type="text" placeholder="请输入DFC兑换金额">
    </div>


    <div class="l-filed">
      <div class="l-label">
        <span class="l-color-red">*</span><span>汇率：</span>
      </div>
      <p>{{rate}}</p>
    </div>

    <div class="l-filed">
      <div class="l-label">
        <span class="l-color-red">*</span><span>DFT金额：</span>
      </div>
      <p>{{dft}}</p>
    </div>

    <div class="l-filed">
      <div class="l-label">
        <span class="l-color-red">*</span><span>支付密码：</span>
      </div>
      <input ref="paypassword" type="password" placeholder="请输入支付密码">
    </div>



    <div class="l-btn-ground">
      <div @click="submit" class="l-btn-submit">确定</div>
      <div data-router="account" @touchstart="router" class="l-btn-return">返回</div>
    </div>
  </div>
</template>

<script>
  import {Toast} from "mint-ui"
  import api from '@/api/login'
  import {mapState, mapActions} from 'vuex'
  export default {
    name: "conversion",
    data () {
      return {
        rate: "",
        money: ""
      }
    },
    computed: {
      ...mapState(['person']),
      dft () {
        let money = Number(this.money)
        if(isNaN(money)) {
          Toast({
            message: "请输入数字",
            duration: 1500
          })

          return "0.000000"
        } else {
          let sum = this.rate * money
          return sum.toFixed(6)
        }
      }
    },
    components: {
    },
    mounted () {
      api.get("user/exchange/getRate", {isToken: true}).then(res => {
        this.rate = res.rate
      })
    },
    methods: {
      ...mapActions(['saveUserInfo']),
      submit () {
        let data = {}
        data['dfc'] = Number(this.$refs.dfc.value)
        data['paypassword'] = this.$refs.paypassword.value

        if(!data['dfc']) {
          Toast({
            message: "dfc金额不能为空",
            duration: 1000,
            position: "middle"
          })
        } else if (data['dfc'] > this.person.userInfo.moneyWallet) {
          Toast({
            message: "dfc金额不能超过账户余额",
            duration: 1000,
            position: "middle"
          })
        } else if (!data['paypassword']) {
          Toast({
            message: "密码不能为空",
            duration: 1000,
            position: "middle"
          })
        } else {
          // ajax
          let formData = new FormData
          formData.append('money', data['dfc'])
          formData.append('PayPwd ', data['paypassword'])
          formData.append('id', this.person.userInfo.id)
          api.post('user/exchange/moneyToCoin', formData, {isToken: true}).then( res => {
            Toast({
              message: "兑换成功",
              duration: 1500,
              position: "middle"
            })

            this.$router.push({name: "account"})
            //更新数据缓存0
            this.saveUserInfo(res)
          })
        }
      },
      router (e) {
        let name = e.target.dataset.router
        this.$router.push({name: name})
      }
    }
  }
</script>

<style lang="less" scoped>

  .l-box {
    border: 1px solid #9e7032;
    width: 700px;
    padding: 40px 10px;
    margin: auto;
    box-sizing: border-box;
  }
  .l-title-name {
    font-size: 40px;
    color: #9e7032;
    font-weight: bold;
    margin-bottom: 40px;
  }

  .l-filed {
    display: flex;
    height: 70px;
    line-height: 70px;
    color: #9e7032;
    margin-bottom: 40px;
    font-size: 28px;

    .l-label {
      width: 180px;
    }

    input {
      outline: none;
      border: 1px solid #9e7032;
      width: 460px;
      padding-left: 20px;
      background-color: #fefef1;
      font-size: 24px;
    }

    .l-veritfy {
      width: 240px;
    }

    .l-btn-verify {
      width: 180px;
      height: 80px;
      line-height: 80px;
      display: inline-block;
      text-align: center;
      color: #fff;
      background-color:  #000;
      border-radius: 45px;
      margin-left: 20px;
      font-size: 24px;
    }
    .l-color-red {
      color: red;
    }
  }

  .l-btn-ground {
    margin-left: 194px;
    margin-bottom: 40px;
    display: flex;

    .l-btn-submit, .l-btn-return {
      width: 180px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 32px;
      background-color: #986d33;
      color: #fff;
      border-radius: 45px;
    }
    .l-btn-return {
      margin-left: 20px;
    }
  }

</style>
